<template>
  <div>
    <el-card class="login-form-layout">
      <el-form autoComplete="on"
               :model="storeForm"
               :rules="storeRules"
               ref="storeForm"
               label-position="left">
        <div style="text-align: center">
          <svg-icon icon-class="login-mall" style="width: 56px;height: 56px;color: #409EFF"></svg-icon>
        </div>
        <h2 class="login-title color-main">通过以下方式找回密码</h2>

        <el-form-item style="margin-bottom: 20px">
          <el-button style="width: 100%" type="primary" :loading="loading" @click.native.prevent="phoneFindPassword">
            手机找回密码
          </el-button>
        </el-form-item>
        <el-form-item style="margin-bottom: 60px">
          <el-button style="width: 100%" type="primary" :loading="loading" @click.native.prevent="emailFindPassword">
            邮箱找回密码
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <img :src="login_center_bg" class="login-center-layout">
  </div>
</template>

<script>
  import login_center_bg from '@/assets/images/login_center_bg.png'
  export default {
    name: 'login',
    data() {
      return {
        login_center_bg
      }
    },
     created() {
        },
    methods: {
      emailFindPassword() {
        this.$router.push({path: '/emailFindPassword'})
      },
      phoneFindPassword() {
        this.$router.push({path: '/phoneFindPassword'})
      }
    }
  }
</script>

<style scoped>
  .login-form-layout {
    position: absolute;
    left: 0;
    right: 0;
    width: 360px;
    margin: 140px auto;
    border-top: 10px solid #409EFF;
  }

  .login-title {
    text-align: center;
  }

  .login-center-layout {
    background: #409EFF;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin-top: 200px;
  }
</style>
